<template>
	<view>
		<view :class="classList[pattern]">{{text}}</view>
	</view>
</template>

<script>
	export default {
		name:"logo",
		props:{
			text:{
				type: String,
				default:0,
				required:true	
			},
			pattern:{
				type: String,
				default:'',
				required:true
			}
		},
		data() {
			return {
				classList:{
					1:'gang',
					2:'HK',
					3:'kk'
					
				}
				
			};
		}
	}
</script>

<style lang="scss">
.gang{
  width: 62rpx;
  height: 62rpx;
  border-radius: 8rpx;
  background-color: #ffcfcf;
  color: $logo-font-color;
  font-size: 32rpx;
  text-align: center;
  line-height:62rpx;

 }
 .HK{
	 width: 42rpx;
	 height: 24rpx;
	 background-color: $logo-backgroundcolor-two;
	 color: #FFFFFF;
	 font-size: 15rpx;
	 text-align: center;
	 line-height: 24rpx;
 }
 .kk{
	 // width: 92rpx;
	 // height: 36rpx;
	 padding: 0 10rpx;
	 background-color: $logo-backgroundcolor-three;
	 color: $logo-font-color-one;
	 font-size: 24rpx;
	 text-align: center;
	 line-height: 36rpx;
 }
</style>
